<template>
	<!--right-icon="scan" rightColor="#d81e06" @rightClick="toScan"-->
	<u-navbar placeholder fixed title="注册" :titleStyle="{fontWeight:'600',fontSize:'18px'}" autoBack le
		left-icon="arrow-left" right-icon="scan" rightColor="#d81e06" @rightClick="toScan" ></u-navbar>
	<view class="p-[16px]">
		<u-form error-type="toast" ref="formRef" :model="formData" :rules="rules">
			<u-form-item prop="commendUserName">
				<u-input v-model="formData.commendUserName" prefix-icon="/static/inviter.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="tel" placeholder="请输入邀请人手机号" border="none"></u-input>
			</u-form-item>
			<u-form-item prop="realName">
				<u-input v-model="formData.realName" prefix-icon="/static/account.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable placeholder="请输入用户名" border="none"></u-input>
			</u-form-item>
			<u-form-item prop="userName">
				<u-input v-model="formData.userName" prefix-icon="/static/phone.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="tel" placeholder="请输入手机号" border="none"></u-input>
			</u-form-item>
			<!-- <u-form-item prop="verifyCode">
				<u-input v-model="formData.verifyCode" prefix-icon="/static/verifycode.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="number" placeholder="请输入验证码" border="none"></u-input>
				<template #right>
					<text @click="getCode" class="text-[#d81e06]">{{tips}}</text>
				</template>
			</u-form-item> -->
			<u-form-item prop="password">
				<u-input v-model="formData.password" prefix-icon="/static/password.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="password" placeholder="请输入密码" border="none"></u-input>
			</u-form-item>
			<u-form-item prop="password2">
				<u-input v-model="formData.password2" prefix-icon="/static/password.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="password" placeholder="请确认密码" border="none"></u-input>
			</u-form-item>
			<!-- <u-form-item prop="resetUserName">
				<u-input v-model="formData.resetUserName" prefix-icon="/static/verifycode.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="number" placeholder="请输入安置号" border="none"></u-input>
			</u-form-item> -->
		</u-form>
		<!-- <u-gap height="20"></u-gap>
		<view class="flex flex-row items-center text-[12px] text-[#999999]">
			<u-icon @click="isAgree = true" v-if="!isAgree" name="/static/eglass-circle.svg"></u-icon>
			<u-icon @click="isAgree = false" v-else name="checkmark-circle-fill" color="#d81e06"></u-icon>
			<text class="ml-[4px]">注册代表同意</text>
			<text @click="toWebview(0)" class="text-[#d81e06]">《用户协议》</text>
			<text>和</text>
			<text @click="toWebview(1)" class="text-[#d81e06]">《隐私政策》</text>
		</view> -->
		<u-gap height="30"></u-gap>
		<u-button @click="register" text="立即注册" color="#d81e06" size="large" shape="circle"></u-button>
		<!-- <u-code :seconds="60" ref="uCodes" @change="codeChange"></u-code> -->
	</view>
</template>

<script setup>
	import {nextTick, ref, unref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	
	const tips = ref('');
	const uCodes = ref();
	const isAgree = ref(false);
	
	const formRef = ref();
	const formData = ref({
		commendUserName:'',//推荐人账号
		realName:'',//用户名
		userName:'',//手机号
		//verifyCode: '',//验证码
		password:'',//密码
		password2: '',//再次确认密码
		//resetUserName: '',//安置号
	});
	
	const rules = {
		commendUserName:[
			{
				required: true,
				message: '请输入推荐人手机号',
				trigger: ['blur'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '推荐人手机号码不正确',
				trigger: ['blur'],
			},
		],
		realName:{
			required: true,
			message: '请填写用户名',
			trigger: ['blur'],
		},
		userName:[
			{
				required: true,
				message: '请输入手机号',
				trigger: ['blur'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				trigger: ['blur'],
			}
		],
		/* verifyCode:[
			{
				required: true,
				message: '请输入验证码',
				trigger: ['blur']
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.number(value) && value.length == 6
				}
			}
		], */
		password:[
			{
				required: true,
				message: '请输入密码',
				trigger: ['blur'],
			},
			{
				min:6,
				max:12,
				message: '长度在6-12个字符之间'
			},
			{
				validator: (rule, value, callback) => {
					return value.split(' ').length == 1;
				},
				message: '密码不能包含空格',
				trigger: ['blur'],
			}
		],
		password2:[
			{
				required: true,
				message: '请确认密码',
				trigger: ['blur'],
			},
			{
				validator: (rule, value, callback) => {
					return value === formData.value.password;
				},
				message: '两次密码不一致',
				trigger: ['blur'],
			}
		]
	}
	
	const codeChange = e => {
		tips.value = e
	}
	
	const getCode = async () => {
		if (uCodes.value.canGetCode) {
			// 模拟向后端请求验证码
			if(!uni.$u.test.mobile(unref(formData).userName)) {
				uni.showToast({
					icon:'none',
					title:'请填写正确的电话号码'
				})
				return
			}
			uni.showLoading({
				title: '正在获取验证码'
			})
			const result = await api.sendSms(unref(formData).userName,1);
			uni.hideLoading();
			if(result[1]) {
				await nextTick();
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				uCodes.value.start();
			}
		}
	}
	
	const register = () => {
		/* if(!isAgree.value){
			uni.showToast({
				icon:'none',
				title:'请先同意《用户协议》和《隐私政策》'
			})
			return
		} */
		formRef.value.validate().then(async res => {
			uni.showLoading();
			const result = await api.register(formData.value);
			uni.hideLoading();
			console.log(result);
			await nextTick();
			if(result[1]) {
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				uni.showToast({
					icon:'success',
					title:'注册成功'
				})
				await new Promise(resolve => setTimeout(() => resolve(),800));
				uni.navigateBack();
			}
		}).catch(err => console.log(err))
	}
	
	const toWebview = index => {
		if(index == 0) {
			uni.navigateTo({
				url:`/pages/webview/webviews?url=` + encodeURIComponent(api.USER_URL)
			})
		} else if(index == 1) {
			uni.navigateTo({
				url:`/pages/webview/webviews?url=` + encodeURIComponent(api.PRIVACY_URL)
			})
		}
		
	}
	
	uniapp.onLoad(option => {
		if(option.code) {
			getCommendUserName(option.code)
		}
	})
	
	const toScan = () => {
		uni.scanCode({
			scanType:['qrcode'],
			success(res) {
				if(res.result) {
					getCommendUserName(res.result)
				}
			}
		})
	}
	
	const getCommendUserName = async code => {
		//获取二维码里面的推荐人手机号
		uni.showLoading();
		const result = await api.getPhoneByCode(code);
		uni.hideLoading();
		if(result[0]) {
			formData.value.commendUserName = result[0];
		} else {
			await nextTick();
			uni.showToast({
				icon:'none',
				title:result[1]
			});
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
